<template>
  <div class="free-wrapper">
    <div class="free-header-wrapper">
      <div class="free-header-container">
        <div class="free-header-title-wrapper">
          <el-image class="free-header-title-image1" src="/web/static/image/tixi-title.png"></el-image>
          <div class="codingIndexBanner">
            <span class="top-desc">系统培养高薪岗位人才</span>
          </div>
        </div>
        <div class="free-header-level1-wrapper">
          <span class="free-header-level1-span">方向 : </span>
          <el-link class="free-header-level1-link"
                   :class="{'link-active' : !level1Id}"
                   @click="onClickLevel1('00000000')"
                   :underline="false">全部</el-link>
          <el-link class="free-header-level1-link"
                   v-for="o in level1"
                   :key="o.id"
                   :class="{'link-active' : o.id === level1Id}"
                   @click="onClickLevel1(o.id)"
                   :underline="false">{{o.name}}</el-link>
        </div>
        <div class="free-header-level2-wrapper">
          <span class="free-header-level2-span">分类 : </span>
          <el-link class="free-header-level2-link"
                   :class="{'link-active' : !level2Id}"
                   @click="onClickLevel2('11111111')"
                   :underline="false">不限</el-link>
          <el-link class="free-header-level2-link"
                   v-for="o in level2"
                   :key="o.id"
                   :class="{'link-active' : o.id === level2Id}"
                   @click="onClickLevel2(o.id)"
                   :underline="false">{{o.name}}</el-link>
        </div>
      </div>
    </div>
    <div class="free-list-wrapper" v-loading="loading">
      <div class="free-list-container" v-show="courses.length !== 0">
        <the-course-card v-for="course in courses" :key="course.id" :course="course"></the-course-card>
      </div>
      <div class="free-list-pagination-wrapper" v-show="courses.length !== 0">
        <el-pagination
          class="free-list-pagination"
          background
          layout="prev, pager, next"
          @current-change="currentChange"
          @size-change="sizeChange"
          :page-size="size"
          :total="total">
        </el-pagination>
      </div>
      <el-empty :image-size="200" description="暂无课程" v-show="courses.length === 0"></el-empty>
    </div>
  </div>
</template>

<script>
  import TheCourseCard from "../components/the-course-card";
  export default {
    name: "free",
    components: {TheCourseCard},
    data() {
      return {
        courses: [],
        level1: [],
        level2: [],
        categorys: [],
        level1Id: "",
        level2Id: "",
        currentPage: 1,
        total: 0,
        size: 8,
        loading: false
      }
    },
    mounted() {
      let _this = this
      _this.listCourse(1)
      _this.allCategory()
    },
    methods: {
      /**
       * 查询课程列表
       */
      listCourse(page) {
        let _this = this
        _this.loading = true
        _this.$axios.post(process.env.VUE_APP_SERVER + '/business/web/course/list', {
          page: page,
          size: _this.size,
          categoryId: _this.level2Id || _this.level1Id || "", // 优先取level2Id
        }).then((resp) => {
          _this.loading = false
          if (resp.data.success) {
            _this.courses = Tool.sortDesc(resp.data.content.list, 'sort')
            _this.total = resp.data.content.total
          }
        }).catch((resp) => {
          console.log("error：", resp)
        })
      },

      /**
       * 所有分类查询
       */
      allCategory() {
        let _this = this
        _this.$axios.get(process.env.VUE_APP_SERVER + '/business/web/category/all').then((resp)=>{
          let categorys = resp.data.content
          _this.categorys = categorys

          // 将所有记录格式化成树形结构
          _this.level1 = []
          for (let i = 0; i < categorys.length; i++) {
            let c = categorys[i]
            if (c.parent === '00000000') {
              _this.level1.push(c)
            } else {
              _this.level2.push(c)
            }
          }
        })
      },

      /**
       * 点击一级分类时
       * @param level1Id
       */
      onClickLevel1(level1Id) {
        let _this = this

        // 点击一级分类时，设置变量，用于课程筛选
        // 二级分类id为空，
        // 如果点击的是【全部】，则一级分类id为空
        _this.level2Id = null
        _this.level1Id = level1Id
        if (level1Id === "00000000") {
          _this.level1Id = null
        }

        // 注意：要先把level2中所有的值清空，再往里放
        _this.level2 = []
        let categorys = _this.categorys
        // 如果点击的是【全部】，则显示所有的二级分类
        if (level1Id === '00000000') {
          for (let i = 0; i < categorys.length; i++) {
            let c = categorys[i]
            if (c.parent !== "00000000") {
              _this.level2.push(c)
            }
          }
        }
        // 如果点击的是某个一级分类，则显示该一级分类下的二级分类
        if (level1Id !== '00000000') {
          for (let i = 0; i < categorys.length; i++) {
            let c = categorys[i]
            if (c.parent === level1Id) {
              _this.level2.push(c)
            }
          }
        }

        // 重新加载课程列表
        _this.listCourse(1)
      },

      /**
       * 点击二级分类时
       * @param level1Id
       */
      onClickLevel2(level2Id) {
        let _this = this

        // 点击二级分类时，设置变量，用于课程筛选
        // 如果点击的是【无限】，则二级分类id为空
        if (level2Id === "11111111") {
          _this.level2Id = null
        } else {
          _this.level2Id = level2Id
        }

        // 重新加载课程列表
        _this.listCourse(1)
      },

      /**
       * 当分页组件的页数改变时
       * @param currentPage
       */
      currentChange(currentPage) {
        let _this = this
        _this.listCourse(currentPage)
      },

      /**
       * 当分页组件的每页显示多少条数据改变时
       * @param size
       */
      sizeChange(size) {
        let _this = this
        _this.listCourse(1)
      },
    }
  }
</script>

<style lang="less">
  .free-wrapper {
    width: 100%;

    .free-header-wrapper {
      width: 100%;
      height: 280px;
      background-color: #F3F6F5;
      box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
      padding-top: 30px;

      .free-header-container {
        width: 1188px;
        margin: auto;

        .free-header-title-wrapper {
          height: 50px;
          display: flex;

          .free-header-title-image1 {
            height: 46px;
            margin-right: 8px;
          }

          .codingIndexBanner {
            height: 50px;
            line-height: 50px;

            .top-desc {
              height: 12px;
              left: 134px;
              top: 46px;
              font-size: 12px;
              color: #545c63;
              letter-spacing: 1px;
              line-height: 12px;
            }

            .free-header-title-image2 {
              height: 12px;
            }
          }
        }

        .free-header-level1-wrapper {
          height: 30px;
          display: flex;
          flex-wrap: wrap;
          margin: 15px 0 10px 5px;

          .free-header-level1-span {
            font-weight: 700;
            line-height: 30px;
            font-size: 14px;
            display: block;
          }

          .free-header-level1-link {
            margin: 0 15px;
            font-size: 14px;
            line-height: 30px;
            padding: 0 8px;
            border-radius: 6px;
          }

          .el-link--default {
            color: #1c1f21;

            &:hover {
              color: black;
            }
          }
        }

        .free-header-level2-wrapper {
          height: 30px;
          display: flex;
          flex-wrap: wrap;
          margin-left: 5px;
          margin-top: 15px;

          .free-header-level2-span {
            font-weight: 700;
            line-height: 30px;
            font-size: 14px;
            display: block;
          }

          .free-header-level2-link {
            margin: 0 15px;
            font-size: 14px;
            line-height: 30px;
            padding: 0 8px;
            border-radius: 6px;
          }

          .el-link--default {
            color: #1c1f21;

            &:hover {
              color: black;
            }
          }
        }
      }
    }

    .free-list-wrapper {
      width: 100%;
      padding-top: 30px;
      padding-bottom: 50px;

      .free-list-container {
        width: 1188px;
        height: 600px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .free-list-pagination-wrapper {
        margin: 20px auto;
        display: flex;
        justify-content: center;
      }
    }
  }

  .link-active {
    color: #e98e46 !important;
    background-color: rgba(233,142,70,.1);
  }
</style>